<template>
	<div class="liftStatBox">
		<div class="liftCountRank">
			<div class="listName">
				<i></i><span class="font14">电梯总数排行</span>
			</div>
			<div class="flexRank">
				<div :class="['countRankItem',index == 4 ? 'bottomNone' : '']" v-for="(item,index) in countRankItem" :key='index'>
					<span><i :class="[index == 0 ? 'redColor' :'' , index == 1 ? 'orangeColor' : '' , index == 2 ? 'greenColor' : '']">{{index+1}}</i>{{item.name}}</span>
					<span><s :class="[index == 0 ? 'redColor' :'' , index == 1 ? 'orangeColor' : '' , index == 2 ? 'greenColor' : '']">{{item.count}}</s>台</span>
				</div>
			</div>
		</div>
		<div class="map">
			<div class="header">智慧梁溪</div>
			<div class="amap-wrapper">
				<el-amap class="amap-box" :plugin="plugin" vid="amap-vue" :center="center" :zoom='13'></el-amap>
			</div>
		</div>
		<div class="areaAllCount">
			<div class="listName">
				<i></i><span class="font14">梁溪区电梯数</span>
			</div>
			<div class="flexRank">
				<div :class="['countRankItem',index == 5 ? 'bottomNone' : '']" v-for="(item,index) in areaAllCountArr" :key='index'>
					<span>{{item.name}}</span>
					<span><s class="redColor">{{item.count}}</s></span>
				</div>
			</div>
		</div>
		<div class="jiankong" style="margin-right: 1%;">
			<div class="listName">
				<i></i><span class="font14">无锡市特种设备安全监管数据</span>
			</div>
			<div class="jiankongContent">
				<div :class="['jiankongItem',index == 3 ? 'bottomNone' : '']" v-for="(item,index) in jianKongArr" :key='index'>
					<div>
						<i class="iWidth">{{item.name1}}</i><span class="redColor spanWidth">{{item.count1}}</span>
					</div>
					<div>
						<i class="iWidth">{{item.name2}}</i><span class="redColor spanWidth">{{item.count2}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="tuBiao" style="width: 50%;">
			<div class="listName">
				<i></i><span class="font14">在用电梯增长</span>
			</div>
			<div class="tuBiaoContent" ref='echartsCol'>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.getColumnar()
		},
		data() {
			return {
				countRankItem: [{
						name: '崇安寺',
						count: '6345'
					},
					{
						name: '通江',
						count: '5782'
					},
					{
						name: '广瑞',
						count: '5345'
					},
					{
						name: '广益',
						count: '5098'
					},
					{
						name: '上马墩',
						count: '4784'
					}
				],
				areaAllCountArr: [{
						name: '乘客电梯数',
						count: '27181'
					},
					{
						name: '电梯入网数',
						count: '2817'
					},
					{
						name: '总电梯数',
						count: '28192'
					},
					{
						name: '近一月96333报警数',
						count: '5098'
					},
					{
						name: '近一月电梯故障数',
						count: '2716'
					},
					{
						name: '乘客入网率',
						count: '9%'
					}
				],
				jianKongArr: [{
						name1: '在册电梯数',
						name2: '再用电梯数',
						count1: '97181台',
						count2: '92719台'
					},
					{
						name1: '15年以上老梯',
						name2: '10年以上老梯',
						count1: '617台',
						count2: '2710台'
					},
					{
						name1: '电梯检测率',
						name2: '使用单位数量',
						count1: '99.13%',
						count2: '299个'
					},
					{
						name1: '电梯故障数',
						name2: '维保单位数量',
						count1: '1345起',
						count2: '124个'
					}
				],
				center: [120.30590543054963, 31.586660063416105],
				plugin: [{
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 100, //超过10秒后停止定位，默认：无穷大
					maximumAge: 0, //定位结果缓存0毫秒，默认：0
					convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
					showButton: true, //显示定位按钮，默认：true
					buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
					showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
					showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
					panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
					extensions: 'all',
					pName: 'Geolocation',
					zoom: 14, //初始化地图层级
				}],
			}
		},
		methods: {
			getColumnar() {
				let dom = this.$refs.echartsCol
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '数量',
						type: 'bar',
						barWidth: '60%',
						data: [48290, 53829, 58921, 64639, 79225, 87829, 92301],
						itemStyle: { //上方显示数值
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'orange',
										fontSize: 14
									}
								}
							}
						}
					}]
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.liftStatBox {
		width: 100%;
		padding: 5px;
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.liftCountRank,
		.areaAllCount {
			padding: 10px;
			box-sizing: border-box;
			width: 20%;
			height: 50%;
			background: white;
			border-radius: 5px;
			margin-right: 1%;

			.flexRank {
				height: 90%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.countRankItem {
					width: 100%;
					padding: 5px;
					border-bottom: 1px solid rgba(200, 200, 200, .8);
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 14px;

					// margin: 10px 0;
					i,
					s {
						margin-right: 5px;
					}
				}
			}
		}

		.map {
			padding: 5px;
			box-sizing: border-box;
			width: 58%;
			height: 50%;
			background: white;
			border-radius: 5px;

			.header {
				width: 100%;
				height: 5%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333;
			}

			.amap-wrapper {
				width: 100%;
				height: 94%;
				margin-top: 1%;
			}
		}

		.jiankong,
		.tuBiao {
			height: 48%;
			width: 49%;
			margin-top: 10px;
			margin-right: 10px;
			background: white;
			border-radius: 5px;
			padding: 10px;
			box-sizing: border-box;

			.jiankongContent {
				height: 90%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.jiankongItem {
					display: flex;
					flex-direction: row;
					padding: 5px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(200, 200, 200, .8);

					div {
						width: 50%;
						text-align: center;
						font-size: 14px;

						span {
							margin-left: 30px;
						}
					}
				}
			}
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 10%;
		align-items: center;

		span {
			color: #2d8cf0;
		}

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}
	}

	.redColor {
		color: #ea1414;
	}

	.orangeColor {
		color: #f7a50e;
	}

	.greenColor {
		color: #0ec50e;
	}

	.bottomNone {
		border-bottom: 0 none !important;
	}

	.areaAllCount {
		margin-right: 0 !important;
		margin-left: 1% !important;
	}

	.tuBiao {
		margin-right: 0  !important;
	}

	.tuBiaoContent {
		height: 90% !important;
	}
	.iWidth , .spanWidth{
		display: inline-block;
		width: 100px;
		text-align: right;
	}
	.spanWidth{
		width: 100px;
		text-align: left;
	}
</style>
